    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>名片制作</title>
        <style>
            *{
                margin: 0;
                padding: 0;

            }
            body{
                background-color: #f0eceb;
            }
            .wrap{
                width: 1000px;
                margin: 100px auto;
            }
           .wrap div {
                list-style: none;
               height: 275px;
               width: 147px;
               /*box-sizing: border-box;*/
               /*border-radius: 60px/40px;*/
               float: left;
               border: 1px solid #67a77f;
               margin-right: 20px;
               position: relative;
               background-color: #ffffff;
            }
            .wjs{
                height: 80px;
                width: 70px;

            }
            .wrap div li:nth-child(2){
                display: block;
                width: 70px;
                height: 80px;
                background-color: #ff0504;
                position: absolute;
                border-radius: 50%;
                overflow: hidden;
                border: 5px solid #ffffff ;
                top: 181px;
                right: 35px;
            }
        </style>
    </head>
    <body>
    <div class="wrap">
        <div>
            <li><img src="img/11.jpg" alt=""></li>
            <li><img src="img/wjs.jpg" alt=""class="wjs"> </li>

        </div>
        <div>
            <li><img src="img/22.jpg" alt=""></li>
            <li><img src="img/wjs.jpg" alt="" class="wjs"> </li>

        </div>
        <div>
            <li><img src="img/33.jpg" alt=""> </li>
            <li><img src="img/wjs.jpg" alt="" class="wjs"> </li>

        </div>
        <div>
            <li><img src="img/44.jpg" alt=""> </li>
            <li><img src="img/wjs.jpg" alt="" class="wjs"> </li>
        </div>
    </div>

    </body>
    </html>